<template>
  <div class="main-left-list">
    <div class="main-left-list-item">
      <img src="@/assets/images/title-bg.png" alt="" />
      <div class="main-left-list-item-title">学校数量</div>
      <div class="main-left-list-item-data">
        <div class="main-left-list-item-data-total">
          <span>{{ (totalList?.school?.total / 10000).toFixed(2) }} </span>
          <p>万</p>
        </div>
        <div class="main-left-list-item-data-bottom">
          <span>昨日 </span>
          <p>+{{ totalList?.school?.yesterday_num }}</p>
        </div>
      </div>
    </div>
    <div class="main-left-list-item">
      <img src="@/assets/images/title-bg.png" alt="" />
      <div class="main-left-list-item-title">教师数量</div>
      <div class="main-left-list-item-data">
        <div class="main-left-list-item-data-total">
          <span>{{ (totalList?.teacher?.total / 10000).toFixed(2) }} </span>
          <p>万</p>
        </div>
        <div class="main-left-list-item-data-bottom">
          <span>昨日 </span>
          <p>+{{ totalList?.teacher?.yesterday_num }}</p>
        </div>
      </div>
    </div>
    <div class="main-left-list-item">
      <img src="@/assets/images/title-bg.png" alt="" />
      <div class="main-left-list-item-title">月活跃度</div>
      <div class="main-left-list-item-data">
        <div class="main-left-list-item-data-total">
          <span>{{
            totalList?.month_liveness?.liveness.replace("%", "")
          }}</span>
          <p>%</p>
        </div>
        <div class="main-left-list-item-data-bottom">
          <span>月活跃用户数 </span>
          <p style="color: rgb(135, 255, 119)">
            {{ totalList?.month_liveness?.month_user_count }}
          </p>
        </div>
      </div>
    </div>
    <div class="main-left-list-item">
      <img src="@/assets/images/title-bg.png" alt="" />
      <div class="main-left-list-item-title">资源总数</div>
      <div class="main-left-list-item-data">
        <div class="main-left-list-item-data-total">
          <span>{{totalList?.resource_total}} </span>
          <p>份</p>
        </div>
        <div class="main-left-list-item-data-bottom">
          <span>覆盖多学科 </span>
        </div>
      </div>
    </div>
    <div class="main-left-list-item">
      <img src="@/assets/images/title-bg.png" alt="" />
      <div class="main-left-list-item-title">省/直辖市/自治区</div>
      <div class="main-left-list-item-data">
        <div class="main-left-list-item-data-total">
          <span>{{totalList?.area_num}} </span>
          <p>个</p>
        </div>
        <div class="main-left-list-item-data-bottom">
          <span>全国开通（除港澳台外） </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { getDatacount } from "@/api/api.js";

const totalList = ref();

onMounted(() => {
  getDatacount().then((res) => {
    totalList.value = res.data;
  });
});
</script>
<style lang="scss" scoped>
@use "@/assets/style/font.scss";
.main-left-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  &-item {
    position: relative;
    width: 100%;
    height: 16.77%;
    backdrop-filter: blur(39.42px);
    background: linear-gradient(
      180deg,
      rgba(9, 74, 92, 0.26) 41.277%,
      rgba(9, 74, 92, 0) 96.097%
    );
    border-radius: 5%;
    > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    &-title {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 28.03%;
      padding-left: 22.32%;
      font-family: "SiYuanHeiTi-CN";
      color: rgb(255, 255, 255);
      font-size: 16px;
      font-weight: 700;
    }
    &-data {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 71.97%;
      &-total {
        display: flex;
        align-items: flex-end;
        justify-content: center;

        margin-top: 5.67%;
        > span {
          color: rgb(129, 247, 255);
          font-family: DIN;
          font-size: 40px;
          font-weight: 700;
          margin-right: 4px;
        }
        > p {
          text-align: center;
          color: rgb(129, 247, 255);
          font-family: SiYuanHeiTi-CN;
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 3%;
        }
      }
      &-bottom {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-bottom: 12.37%;
        > p {
          color: rgb(255, 204, 119);
          font-family: DIN;
          font-size: 16px;
          font-weight: 500;
          margin-left: 4px;
        }
      }
    }
  }
}
</style>
